<!DOCTYPE html>
{% load staticfiles %}
<html>

<head>
    <meta charset="utf-8">
    <title>list-page</title>
</head>

<link rel="stylesheet" href="{% static 'css/list-page.css' %}" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="{% static 'css/CampusRenting-LandingPage.css' %}" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="{% static 'css/semantic.css' %}" media="screen" title="no title" charset="utf-8">
<body style="background: #e5e5e5;">
    <div class="ui vertical basic segment bg" style="padding: 0px;">
        <div class="ui inverted top borderless menu" style="background-color: rgba(0, 0, 0, 0.2);top:0px;" >
            <div class="ui inverted text menu">

                <div class="ui image">
                    <img src="/static/image/logo.png" alt="" class="logo" />
                </div>

                <span class="layer1">校园租</span>

                <div class="right menu">
                  {% if request.UserInfo.is_authenticated %}
                  <div class="item">
                      <h5 class="ui inverted header">
                          <span style="margin-right:20px;">{{ request.userinfo.username }}</span>
                          <div class="ui mini circular image">
                              <img src="/upload/{{ request.userinfo.avatar }}" alt="" />
                          </div>
                      </h5>
                  </div>
                  <div class="item">
                    <a herf="{% url 'login' %}" class="item login">登出</a>
                  </div>
                  {% else %}
                    <div class="item">
                      <a herf="{% url 'login' %}" class="item login">登录</a>
                    </div>
                    <a herf="{% url 'register' %}" class="item">
                        <button type="button" name="button" class="ui circular orange button">
                        <img src="/static/image/key_icon.png" alt="" class="key"/>
                        <span class="fine-tuning">注册</span>
                        </button>
                    </a>
                  {% endif %}
                </div>
            </div>
        </div>

        <div class="ui basic vertical segment pku-tit">
            {{ name }}搜索结果：{{ houseinfo_number }}个房源
        </div>

    </div>

    <div class="content bg">
        <div class="Rectangle-87">
            <div class="layer3">
                筛选
            </div>

            <div class="ui left floated segment l1" style="box-shadow: none;">
                <form action="" method="post" enctype="multipart/form-data">
                <div class="ui vertical basic segment">
                    <div class="layer4">
                        按类型
                        <img src="/static/image/right_icon.png" alt="" style="width:6px;height:11px;margin-left:20.5px;" />
                        <div class="ui form">
                            <div class="inline fields">
                                {{ form.typehouse }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="ui vertical basic segment" style="margin-top:20px;">
                    <div class="layer4" style=" margin-top:19px;">
                        按户型
                        <img src="/static/image/right_icon.png" alt="" style="width:6px;height:11px;margin-left:20.5px;margin-top:15px;" />
                    </div>
                    <div class="ui vertical basic segment form1">
                        <div style="margin-top:-2px;">
                          {{ form.housetype }}
                        </div>
                    </div>
                </div>

                <div class="ui vertical basic segment" style="margin-top:-40px;">
                    <div class="layer4">
                        按价格
                        <img src="/static/image/right_icon.png" alt="" style="width:6px;height:11px;margin-left:20.5px;margin-top:15px;" />
                    </div>
                    <div style="margin-top:20px;">
                      {{ form.min_rent.label }}
                      {{ form.min_rent }}
                    </div>
                    <div style="margin-top:20px;">
                      {{ form.max_rent.label }}
                      {{ form.max_rent }}
                    </div>
                </div>

                <div class="ui vertical basic segment">
                    <div class="layer4" style="margin-top:10px;">
                        按设施
                        <img src="/static/image/right_icon.png" alt="" style="width:6px;height:11px;margin-left:20.5px;margin-top:15px;" />
                    </div>
                    <div class="ui vertical basic segment form1" style="margin-top:5px;">
                        <div style="margin-top:-2px;">
                          {{ form.installations }}
                        </div>
                    </div>

                </div>
                <div class="ui vertical basic segment">
                    <div style="width: 100%;background-color: #fcc416;height: 35px;text-align: center;border-radius: 5px;">
                        {% csrf_token %}
                        <button type="submit" style="height: 100%;background: none;border: none;">完成筛选</button>
                    </div>
                </div>
                </form>
            </div>

        </div>

        <div class="ui right floated segment r1" style="box-shadow: none;">
          <div class="ui borderless text menu" style="margin-top:2px;">
            <div class="layer6">
                排序
            </div>

            <div class="ui dropdown sort" style="border: none;text-align:center;margin-right:10px;">
                <div class="ui form" >
                    <div class="field">
                        <select style="height: 40px;-moz-appearance: none;-webkit-appearance: none;">
                            <option value="2">价格升序</option>
                            <option value="1">价格降序</option>
                        </select>
                    </div>
                </div>
            </div>
          </div>

          <div class="ui divider" style="margin-top:-2px;"></div>

          <div class="ui three column grid">
            {% for houseinfo in houseinfo_list %}
              <div class="column">
                <div class="ui inverted segment card-view" style="  background: url('/static/image/img1.png');"></div>
                <div class="ui inverted segment card-bottom">
                  <div class="ui vertical segment suub">
                    <div class="layer8">
                      ¥ {{ houseinfo.rent }}/月
                    </div>
                    <div class="layer9">
                      清华东路27号院2居室{{ houseinfo.typehouse }}
                    </div>
                    <div class="layer10">
                      {{ houseinfo.type }}-距离500米
                    </div>
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>

          <div class="ui vertical basic segment" style="margin-top:12px;">
            <div class="ui left floated segment l2">
              {% if houseinfo_list.has_previous %}
                <a href="?page={{ houseinfo_list.previous_page_number }}">
                  <i class="angle left big icon"></i>
                </a>
              {% else %}
                <a href="?page={{ houseinfo_list.start_index }}">
                  <i class="angle left big icon"></i>
                </a>
              {% endif %}
            </div>



            <div class="ui borderless text menu num">
              {% for page_number in houseinfo_list.paginator.page_range %}
                {% ifequal page_number  houseinfo_list.number %}
                  <a href="?page={{ page_number }}" class="active item" style="background-color: orange; color:white">
                    {{ page_number }}
                  </a>
                {% else %}
                  <a href="?page={{ page_number }}" class=" item">
                    {{ page_number }}
                  </a>
                {% endifequal %}
              {% endfor %}
            </div>

            <div class="ui right floated segment r2">
              {% if houseinfo_list.has_next %}
                <a href="?page={{ houseinfo_list.next_page_number }}">
                  <i class="angle right big icon"></i>
                </a>
              {% else %}
                <a href="?page={{ houseinfo_list.end_index }}">
                  <i class="angle right big icon"></i>
                </a>
              {% endif %}
            </div>


          </div>

        </div>

    </div>

    <!--<div class="ui basic vertical segment" style="width: 1440px;height:307px;background-color: #ffffff;">
      <div class="ui basic vertical segment" style="margin-top:18px;width:878px;position:relative;left:50%;transform:translate(-50%,0)">

        <div class="ui four column grid" style="width:988px;">
          <div class="column">
            <div class="ui vertical text menu">
                <div class="item-header">关于我们</div>
                <div class="item-content">常见问题</div>
                <div class="item-content">联系我们</div>
                <div class="item-content">加入我们</div>
            </div>
          </div>

          <div class="column">
            <div class="ui vertical text menu">
                <div class="item-header">热门房源</div>
                <div class="item-content">北京大学</div>
                <div class="item-content">清华大学</div>
                <div class="item-content">人民大学</div>
                <div class="item-content">北京邮电</div>
            </div>
          </div>

          <div class="column">
            <div class="ui vertical text menu">
                <div class="item-header">关注我们</div>
                <div class="item-content">关注微博</div>
                <div class="item-content">关注微信</div>
                <div class="item-content">关注头条号</div>
                <div class="item-content">关注知乎</div>
            </div>
          </div>

          <div class="column">
            <div class="ui vertical text menu">
                <div class="item-header">反馈问题</div>
                <div class="item-email">
                  欢迎写邮件向我们反馈
                  邮箱地址：
                  hi@mugglecoding.com
                </div>

            </div>
          </div>

        </div>

        <div class="ui divider botm"></div>

        <div class="ui left floated vertical basic segment Developed-by-Mugglec">
          Developed by Mugglecoding team 3 group 46 Kathy
        </div>

        <div class="ui right floated vertical basic segment ICP15047012-2">
          京ICP备15047012号-2
        </div>

      </div>

    </div>-->

    <!-- - - - - - - - - - - - - - - - - footer - - - - - - - - - - - - - - - - -->
        <div class="ui vertical segment footer" style="background-color: white;">
            <div class="ui container footer">
                <div class="ui grid footer">
                    <!-- firt column -->
                    <div class="four wide column in-footer">
                        <div class="ui vertical text menu in-footer">
                            <div class="item header-in-menu-footer">
                                <h3 class="ui header">关于我们</h3>
                            </div>
                            <div class="item in-menu-footer">常见问题</div>
                            <div class="item in-menu-footer">联系我们</div>
                            <div class="item in-menu-footer">加入我们</div>
                        </div>
                    </div>
                    <!-- second column -->
                    <div class="four wide column in-footer" style="padding-left: 31px;">
                        <div class="ui vertical text menu in-footer">
                            <div class="item header-in-menu-footer">
                                <h3 class="ui header">热门房源</h3>
                            </div>
                            <div class="item in-menu-footer">北京大学</div>
                            <div class="item in-menu-footer">清华大学</div>
                            <div class="item in-menu-footer">人民大学</div>
                            <div class="item in-menu-footer">北京邮电</div>
                        </div>
                    </div>
                    <!-- third column -->
                    <div class="four wide column in-footer" style="padding-left: 62px;">
                        <div class="ui vertical text menu in-footer">
                            <div class="item header-in-menu-footer">
                                <h3 class="ui header">关注我们</h3>
                            </div>
                            <div class="item in-menu-footer">关注微信</div>
                            <div class="item in-menu-footer">关注微薄</div>
                            <div class="item in-menu-footer">关注头条号</div>
                            <div class="item in-menu-footer">关注知乎</div>
                        </div>
                    </div>
                    <!-- fourth column -->
                    <div class="four wide column in-footer" style="padding-left: 93px;">
                        <div class="ui vertical text menu in-footer">
                            <div class="item header-in-menu-footer">
                                <h3 class="ui header">反馈问题</h3>
                            </div>
                            <div class="item in-menu-footer" style="line-height: 150%;">
                                欢迎写邮件向我们反馈<br />
                                邮箱地址：<br />
                                hi@mugglecoding.com
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ui divider in-footer"></div>
                <div class="text-left in-footer">
                    Developed by Mugglecoding team catcuts
                </div>
                <div class="text-right in-footer" style="float: right;margin-left: 0px;">
                    京ICP备15047012号-2
                </div>
            </div>
        </div>

</body>

</html>
